<template>
  <div>
    <!-- 添加 -->
    <div class="button-group">
      <el-button @click="add">添加</el-button>
    </div>
    <!-- 查询表单 -->
    <el-form :inline="true">
      <el-form-item>
        <el-input placeholder="请输入名称" v-model="keyWord" clearable>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      ref="tableList"
      :data="tableData"
      style="width: 100%"
      @expand-change="expandChange"
      :row-key="(row) => row.regId"
      :expand-row-keys="expandRows"
    >
      <el-table-column type="expand" v-if="true">
        <template slot-scope="props">
          <el-table
            :data="childrenTableData"
            border
            style="width: 80%; margin-left: 10px"
          >
            <el-table-column label="父ID" prop="regId" />
            <el-table-column label="ID" prop="regSubId" />
            <el-table-column label="类型" prop="subRegisteredfeeName" />
            <el-table-column label="子费用金额" prop="subRegisteredfeeFee" />
          </el-table>
        </template>
      </el-table-column>
      <el-table-column label="ID" prop="regId"> </el-table-column>
      <el-table-column label="挂号类型" prop="registeredfeeName">
      </el-table-column>
      <el-table-column label="子费用项" prop="numberofsub"> </el-table-column>
      <el-table-column label="总金额" prop="registeredfeeAggregateAmount">
      </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            @click="handleEdit(scope.row)"
            style="margin-right: 10px"
            ><font-awesome-icon :icon="['fas', 'edit']" style="font-size: 20px"
          /></el-button>
          <el-popconfirm
            confirm-button-text="删除"
            cancel-button-text="取消"
            icon="el-icon-info"
            icon-color="red"
            title="确认删除费别及子费别吗？"
            @confirm="handleDel(scope.row)"
          >
            <el-button type="danger" size="mini" slot="reference">
              <font-awesome-icon
                :icon="['fas', 'remove']"
                style="font-size: 20px"
            /></el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加弹出层 -->
    <el-dialog title="挂号费" :visible.sync="dialogFormVisible" width="780px">
      <el-form
        :inline="true"
        :model="Editform"
        ref="edit-form"
        class="demo-form-inline"
      >
        <el-form-item
          label="费用名称"
          :rules="{
            required: true,
            message: '不能为空',
            trigger: 'blur',
          }"
          prop="registeredfeeName"
        >
          <el-input
            v-model="Editform.registeredfeeName"
            placeholder="费别"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="金额"
          :rules="{
            required: true,
            message: '不能为空',
            trigger: 'blur',
          }"
          prop="registeredfeeFee"
        >
          <el-input-number
            :min="1"
            v-model="Editform.registeredfeeFee"
            placeholder="金额"
          ></el-input-number>
        </el-form-item>
        <el-form-item>
          <el-button style="width: 530px" @click="addDomain()">
            添加子费用
          </el-button>
        </el-form-item>
        <!-- 动态删减部分 -->
        <div v-for="(domain, index) in Editform.subReg" :key="domain.key">
          <el-form-item
            label="子费别名称"
            :prop="'subReg.' + index + '.subRegisteredfeeName'"
            :rules="{
              required: true,
              message: '不能为空',
              trigger: 'blur',
            }"
          >
            <el-input v-model="domain.subRegisteredfeeName"></el-input>
          </el-form-item>

          <el-form-item
            label="子费别金额"
            :prop="'subReg.' + index + '.subRegisteredfeeFee'"
            :rules="{
              required: true,
              message: '不能为空',
              trigger: 'blur',
            }"
          >
            <el-input-number
              :min="1"
              v-model="domain.subRegisteredfeeFee"
            ></el-input-number>
          </el-form-item>
          <el-form-item>
            <el-button @click.prevent="removeDomain(domain)">删除</el-button>
          </el-form-item>
        </div>
        <!-- ./ -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAdd">确 定</el-button>
      </div>
    </el-dialog>
    <!--  -->
    <el-dialog
      title="挂号费修改"
      :visible.sync="dialogEditVisible"
      class="el-dialogStyle"
      width="40%"
    >
           
      <el-form
        :inline="true"
        :model="onerow"
        class="demo-form-inline"
        style="margin-left: 25px"
      >
        <el-form-item label="挂号费名称">
          <el-input
            v-model="onerow.registeredfeeName"
            placeholder="输入挂号费名称"
            clearable
            style="width: 160px"
          ></el-input>
        </el-form-item>
        <el-form-item label="费用">
          <el-input-number
            v-model="onerow.registeredfeeFee"
            placeholder="输入挂号费费用"
            clearable
            oninput="value=value.replace(/[^0-9.]/g,'')"
          ></el-input-number
        ></el-form-item>
      </el-form>
      <el-button
        @click="addSubReg()"
        style="margin-top: 10px; margin-left: 0%; width: 100%"
      >
        <font-awesome-icon :icon="['fas', 'plus']" />
        添加</el-button
      >     
      <hr style="margin-top: 10px" />
                  <br />
      <!-- 子表格查询 -->
      <el-table :data="expands" stripe style="width: 80%; margin-left: 10%"
        >       
        <el-table-column
          prop="subRegisteredfeeName"
          label="子检查名称"
          width="180"
        >
                       
          <template slot-scope="scope"
            >         
            <el-input v-model="scope.row.subRegisteredfeeName"></el-input>       </template
          >              </el-table-column
        >       
        <el-table-column
          prop="subRegisteredfeeFee"
          label="子检查费用/元"
          width="200"
        >
                           
          <template slot-scope="scope">
            <el-input-number
              v-model="scope.row.subRegisteredfeeFee"
              oninput="value=value.replace(/[^0-9.]/g,'')"
            ></el-input-number>
               
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-popconfirm
              confirm-button-text="删除"
              cancel-button-text="取消"
              icon="el-icon-info"
              icon-color="red"
              title="确认删除子费别吗？"
              @confirm="removeSubReg(scope.row)"
            >
              <el-button type="danger" plain slot="reference">删除</el-button>
            </el-popconfirm>
              </template
          >     
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="modify">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    like,
    list,
    list_sub,
    add,
    getById,
    del,
    modify,
  } from '../../api/ghfgl/api.js'

  export default {
    data() {
      return {
        tableData: [],
        childrenTableData: [],
        expandRows: [],
        keyWord: '', //搜索关键字,
        Editform: {
          registeredfeeName: '', //费用名称
          registeredfeeFee: null, // 费用金额
          subReg: [],
        },
        onerow: {}, //父表单
        expands: [], //子表格,
        onerow: {}, //一行传递
        dialogFormVisible: false, //控制编辑弹出层显示
        dialogEditVisible: false,
      }
    },
    methods: {
      modify() {
        this.onerow.subReg = this.expands
        modify(this.onerow).then((res) => {
          if (res.data) {
            this.$message.success('success')
            this.getData()
          } else {
            this.$message.error('error')
          }
        })
        this.dialogEditVisible = false
      },
      // 编辑框中
      // 添加一个子项
      addSubReg() {
        this.expands.push({
          regId: this.onerow.regId,
          subRegisteredfeeName: '',
          subRegisteredfeeFee: 0,
        })
      },
      //删除一个子项
      removeSubReg(item) {
        console.log(item)
        var index = this.expands.indexOf(item)
        if (index !== -1) {
          this.expands.splice(index, 1)
        }
      },
      // 删除
      handleDel(row) {
        const regId = row.regId
        del(regId).then((res) => {
          this.getData()
        })
      },
      // 编辑框弹出
      handleEdit(row) {
        const regId = row.regId
        let that = this
        getById(regId).then((res) => {
          that.onerow = res.data
        })
        list_sub(regId).then((res) => {
          let data = res.data
          that.expands = data
        })
        console.log()
        this.dialogEditVisible = true
      },
      // 添加按钮事件
      add() {
        this.dialogFormVisible = true
      },
      // 添加表单提交
      handleAdd() {
        this.$refs['edit-form'].validate((valid) => {
          if (valid) {
            console.log(this.Editform)
            add(this.Editform).then((res) => {
              this.getData()
            })
            this.dialogFormVisible= false
          } else {
            this.$message.error('请填写完整表单')
            return false
          }
        })
      },
      // 获取数据
      getData() {
        const date = new Date()
        list().then((res) => {
          this.tableData = res.data
        })
      },
      // 模糊查询
      onSubmit() {
        like(this.keyWord).then((res) => {
          this.tableData = res.data
        })
      },
      // 控制只展开一行
      expandChange(row, expandedRows) {
        let that = this
        list_sub(row.regId).then((res) => {
          that.childrenTableData = res.data
        })
        //   console.log(row, expandedRows);
        if (expandedRows.length > 1) {
          this.$refs.tableList.toggleRowExpansion(expandedRows[0])
        }
      },
      // 删除一个子费别添加框
      removeDomain(item) {
        var index = this.Editform.subReg.indexOf(item)
        if (index !== -1) {
          this.Editform.subReg.splice(index, 1)
        }
      },
      // 添加一个子费别添加框
      addDomain() {
        this.Editform.subReg.push({
          subRegisteredfeeName: '',
          subRegisteredfeeFee: 0,
          key: Date.now(),
        })
      },
    },
    mounted() {
      this.getData()
    },
  }
</script>

<style lang="css" scoped>
  .button-group {
    float: right;
  }
</style>
